<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Start Stop</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').cycle({
		pager: '#slider-pager'
	});
	
	$('.activetab a').each( function() {
	 	var activeTab = $(this).parents('li').index();
	 	var paneVisible	= $(this).parents('ul').next().children('div').eq(activeTab);
	 	paneVisible.show().siblings().hide();
	});
		 
	$('.tabs a').click( function() {	 
	 	$(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); 		 	
	 	var activeTab = $(this).parent('li').index();
		var paneVisible	= $(this).parents('ul').next().children('div').eq(activeTab);
		paneVisible.show().siblings().hide();
	 	return false;
	});
	
	
});
</script>

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" /><![endif]-->
</head>

<body>
<div id="page">

	<div id="header" class="hp section">
		<div id="top" class="group">
			<a href="#" class="home medium">Home</a>
			
			<div id="top-search"><input type="text" /></div>
			
			<ul class="medium">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div><!-- /top -->
		
		<div id="logo">
			<a href="#"><img src="images/logo.png" alt="" /></a>
		</div><!-- /logo -->
		
		<a href="#" id="banner">
			<img src="images/dummy1.png" alt="" />
		</a><!-- /banner -->	
	</div><!-- /header -->
	
	<div id="hero-wrap">
		<div id="hero" class="section group">
			<p id="hero-text" class="book">All your stats in <b class="medium">One Place</b> <span>Game Stats, Productivity, Trophies, Recommendations &amp; more!</span> <a href="#">Sign up for free!</a></p>
			<div id="slider-wrap">
				<div id="slider">
					<img src="images/slide1.png" alt="" />
					<img src="images/slide2.png" alt="" />
					<img src="images/slide3.png" alt="" />										
				</div><!-- /slider -->
				<div id="slider-pager"></div>
			</div><!-- /slider -->
		</div>
	</div><!-- /hero-wrap -->
	
	<div id="news-wrap">
		<div id="news" class="section group">
			
			<div id="recent-activity" class="news-list">
				<h3>Recent Activity</h3>
				<ul>
					<li class="group">
						<img src="images/icon_mini.png" alt="" />
						<a href="#">John Doe</a>
						<p>Pellentesque eu est a nulla placerat dignissim.</p>
					</li>
					<li class="group">
						<img src="images/icon_mini.png" alt="" />
						<a href="#">John Doe</a>
						<p>Pellentesque eu est a nulla placerat dignissim.</p>
					</li>
					<li class="group">
						<img src="images/icon_mini.png" alt="" />
						<a href="#">John Doe</a>
						<p>Pellentesque eu est a nulla placerat dignissim.</p>
					</li>
					<li class="group">
						<img src="images/icon_mini.png" alt="" />
						<a href="#">John Doe</a>
						<p>Pellentesque eu est a nulla placerat dignissim.</p>
					</li>
					<li class="group">
						<img src="images/icon_mini.png" alt="" />
						<a href="#">John Doe</a>
						<p>Pellentesque eu est a nulla placerat dignissim.</p>
					</li>
				</ul>
			</div><!-- /recent-news -->
			
			<div id="tabs-wrap">
				<ul class="tabs group">
					<li class="activetab"><a href="#">Active tab</a></li>
					<li><a href="#">Inactive Tab</a></li>
				</ul>
				<div class="panes">
					<div class="pane">
						<ul class="news-list tab-list">
							<li class="group">
								<img src="images/bg_medium.png" alt="" />
								<a href="#">Nam pulvinar, odio sed </a>
								<p>Yes it’s an awesome trophie with two rows of text</p>
								<p class="more"><a href="#">Read more</a></p>
							</li>
							<li class="group">
								<img src="images/bg_medium.png" alt="" />
								<a href="#">Nam pulvinar, odio sed </a>
								<p>Yes it’s an awesome trophie with two rows of text</p>
								<p class="more"><a href="#">Read more</a></p>
							</li>
							<li class="group">
								<img src="images/bg_medium.png" alt="" />
								<a href="#">Nam pulvinar, odio sed </a>
								<p>Yes it’s an awesome trophie with two rows of text</p>
								<p class="more"><a href="#">Read more</a></p>
							</li>
							<li class="group">
								<img src="images/bg_medium.png" alt="" />
								<a href="#">Nam pulvinar, odio sed </a>
								<p>Yes it’s an awesome trophie with two rows of text</p>
								<p class="more"><a href="#">Read more</a></p>
							</li>
						</ul>
					</div><!-- /pane -->
					<div class="pane">
						<ul>
							<li><a href="#">Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris</a></li>
							<li><a href="#">Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris</a></li>
							<li><a href="#">Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris</a></li>
						</ul>
					</div><!-- /pane -->
				</div><!-- /panes -->
			</div><!-- /tabs -->
			
			<div id="recent-news" class="news-list">
				<h3>Recent Activity</h3>
				<ul>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
					<li class="group">
						<a href="#">John Doe <span>Aug 17th</span></a>
					</li>
				</ul>
			</div><!-- /recent-news -->
			
		</div><!-- /news -->
	</div><!-- /news-wrap -->
	
	<div id="footer-wrap">
		<div id="footer" class="section group">
			
			<div class="footerblock mar90">
				<h5>Header</h5>
				<ul id="flinks">
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
					<li><a href="#">Linkaki</a></li>
				</ul>
			</div><!-- /fblock -->
			
			<div class="footerblock long mar80">
				<h5>Header</h5>
				<ul>
					<li class="group"><img src="images/fimg.png" alt="" /> <a href="#">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.</a></li>
					<li class="group"><img src="images/fimg.png" alt="" /> <a href="#">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.</a></li>					
				</ul>
				<a href="#" class="link-right">Link</a>
			</div><!-- /fblock -->
			
			<div class="footerblock">
				<h5>Header</h5>
				<ul id="tg">
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
					<li><a href="#">Deus Ex: Human Revolution</a> <span>Aug 18th</span></li>
				</ul>
				<a href="#" class="link-right">Link</a>
			</div><!-- /fblock -->
			
		</div><!-- /footer -->
	</div><!-- /footer-wrap -->
	
	<div id="credits-wrap">
		<div id="credits" class="section">
			<p>Copyright &copy; 2011</p>
			<p id="links"><a href="#">Some links</a></p>
		</div><!-- /credits -->
	</div><!-- /credits-wrap -->

</div><!-- /page -->
</body>
</html>